<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Ajax 首页</title>
</head>
<body>
<div id="app">
    Ajax 首页 <br>
    <button @click="testAjax">测试 springmvc 处理 ajax</button>
    <br>
    <button @click="testRequestBody">测试@RequestBody处理json参数</button>
    <br>
    <a th:href="@{/test/ResponseBody}">测试@ResponseBody注解响应浏览器</a><br>
    <a th:href="@{/test/ResponseBody/json}">使用@ResponseBody注解响应json格式的数据</a><br>
    <button @click="testResponseBody">使用@ResponseBody注解响应json格式的数据</button>
    <br>
    <a th:href="@{/test/down}">下载图片</a>
    <br>

    <form th:action="@{/test/upload}" method="post" enctype="multipart/form-data">
        <input type="file" name="avator"><br>
        <input type="submit" th:value="上传头像">
    </form>


</div>
<script th:src="@{/js/vue.js}" type="text/javascript"></script>
<script th:src="@{/js/axios.min.js}"></script>
<script type="text/javascript">
var vue=new Vue({
    el:"#app",
    methods:{
        testAjax(){
            axios.post(
                "/SpringMVC/test/ajax?id=1001",
                {username:"admin",password:"123456"}
            ).then(response=>{
                console.log(response.data)
            })
        },
        testRequestBody(){
            axios.post(
                "/SpringMVC/test/RequestBody/json",
                {username:"admin",password:"123456",age:123,gender:"男"}
            ).then(respon=>{
                console.log(respon.data)
            })
        },
        testResponseBody(){
            axios.post("/SpringMVC/test/ResponseBody/json").then(response=>{
                console.log(response.data)
            })
        }
    }
})
</script>
</body>
</html>